<template>
  <div style="margin-left: 3%;margin-right: 3%">
    <my-head></my-head>
    <template>
      <div class="menue_index" style="margin-top: 40px;margin-left: 5%">

        <div class="uc-course-system_hd" style="margin-right: 90%">
          <h2 class="title f-ib">影院分类</h2>
        </div>
        <el-divider></el-divider>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#303133">
          <el-menu-item index="1" class="course_sys">奥斯卡国际影城</el-menu-item>
          <el-menu-item index="2" class="course_sys">
            大地影院
          </el-menu-item>
          <el-menu-item index="3" class="course_sys">太平洋电影城</el-menu-item>
          <el-menu-item index="4" class="course_sys">万达影城</el-menu-item>
          <el-menu-item index="5" class="course_sys">文投国际影城</el-menu-item>
        </el-menu>
        <div class="line"></div>
      </div>
      <div style="margin-left: 0%">
        <el-row>
          <el-col :span="5" v-for="(o, index) in cinema" :key="index" :offset="index > 0 ? 1 : 1">
            <el-card :body-style="{ padding: '5px' }">
              <img style="width: 280px;height: 150px" :src="o.cinemaMap" class="image">
              <div  style="padding: 30px;">
                <span>{{o.cinemaName}}</span>
                <span>{{o.cinemaPhone}}</span>
                <div class="bottom clearfix">
                  <time  class="time">{{ o.cinemaAddress | ellipsis}}</time>
                  <el-button type="text" @click="cinemaDetail(o.id)" class="button">点击查看</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--<div style="margin-top: 40px;margin-left: 5%">
        <img src="@/static/images/xiaoguanggao.jpg"></img>
      </div>-->

    </template>

  </div>
</template>

<script>
    export default {
        name: "Cinema",
        data() {
            return {
                cinema:[],
                activeIndex: '1',
                activeIndex2: '1',
                currentDate: new Date(),
                key:1
            }
        },
        methods:{
            //查询所有电影院
            handleSelect(key,keyPath) {
                this.key = key;
                this.$axios.post("/cinema/findMovieByCinema/"+this.key ).then(res=>{
                    if (res.data.code==0){
                        console.log(res.data.data)
                        this.course=res.data.data;
                    }
                })
            },
            /* 跳转到电影详细页面
            cinemaDetail:function (id) {
                this.$router.push("/movie/find"+id);
            }*/
        },
        mounted(){
            this.handleSelect(this.key);
        },
        //字数控制在30字内
        filters: {
            ellipsis(value) {
                if (!value) return "";
                if (value.length > 30) {
                    return value.slice(0, 30) + "...";
                }
                return value;
            }
        }

    }
</script>

<style scoped>
  .menue_index {
    margin: 0;
  }
  .uc-course-system_hd {
    margin-bottom: 16px;
  }
  .f-ib {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin-bottom: 10%;
  }
</style>
